<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 500px;
            border: 1px solid #000;
            /* 1. 相对路径 2. 绝对路径*/

            /* 默认情况下，背景图是先水平，然后在垂直，铺满整个容器*/
            background-image: url(./imgs/bj2.png);

            /* 有的时候，1. 不希望重复，只显示一次 2. 沿着水平平铺 3. 沿着垂直平铺*/

            /* 注意：在一个盒子里面，我们可以设置背景图的同时，还可以设置背景颜色*/
            /* 有背景图的地方显示背景图，没有背景图的地方显示颜色*/
            background-color: red;

            background-repeat: no-repeat;

            /* 用于设置背景图的宽 高*/
            /*background-size: 200px 100px;*/
            /* 这个东西我们称之为浏览器前缀 ： -webkit-*/
            /* 常见的前缀： -webkit 浏览器使用的 webkit 内核 */
            /* -moz  火狐专用*/
            /* -o 欧朋*/
            /* 浏览器迷*/
            /* https://liulanmi.com/browser */

            /* 为什么会出现这些专有的前缀？ */

            /* 大致的原因是这样的，我们的 html  和 css 是有 w3c组织进行维护的。由该组织来决定 css html 语言里面的语法特性，新的功能。

            w3c：指定规范标准（gb567） 食品上面都是有标准

            接下来由这些浏览器厂商按照 w3c 指定的标准然后进行实现。但是往往是标准在后，实现在前。

            新功能：1. idea 想法 2. 想办法实现 3. 准备提交草案 4. 标准组织开会讨论 4. 审核 5. 指定严格使用文档，规范 6. beta 测试版 7. bug  8. release 发布版

            为什么要超前实现？
            答：抢占市场。

            w3c组织  浏览器厂商 开发者 用户
            */
            /*-webkit-background-size: 200px;*/
            background-size: 200px;


            /*background-repeat: no-repeat;*/

            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/

            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>